<% if (addOnEnabled.start) { ignoreFile() } %><% if (codeRouter) {
  
/// Code Router

%>import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import {
  Outlet,
  RouterProvider,
  createRootRoute,
  createRoute,
  createRouter,
} from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
<% for(const route of routes) { %>import <%= route.jsName %> from "<%= relativePath(route.path) %>";
<% } %><% if (routes.length > 0) { %>
import Header from "./components/Header";
<% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider')) { %>
import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
<% } %><% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
import * as <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
<% } %>

import "./styles.css";
import reportWebVitals from "./reportWebVitals.<%= js %>";

import App from "./App.<%= jsx %>";

const rootRoute = createRootRoute({
  component: () => (
    <>
    <% for(const integration of integrations.filter(i => i.type === 'provider')) { %>
      <<%= integration.jsName %>>
    <% } %>
    <% if (routes.length > 0) { %><Header /><% } %>
      <Outlet />
      <TanStackRouterDevtools />
      <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>
        <<%= integration.jsName %> />
      <% } %>
    <% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %>
      </<%= integration.jsName %>>
    <% } %>
    </>
  ),
});

const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/",
  component: App,
});

const routeTree = rootRoute.addChildren([indexRoute<%= routes.map(route => `, ${route.jsName}(rootRoute)`).join('') %>]);

<% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
const <%= integration.jsName %>Context = <%= integration.jsName %>.getContext();
<% } %>const router = createRouter({
  routeTree,
  context: {
    <% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
      ...<%= integration.jsName %>Context,
    <% } %>
  },
  defaultPreload: "intent",
  scrollRestoration: true,
  defaultStructuralSharing: true,
  defaultPreloadStaleTime: 0,
});
<% if (typescript) { %>
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

const rootElement = document.getElementById("app");
<% } else { %>
const rootElement = document.getElementById("app");
<% } %>if (rootElement && !rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <StrictMode>
      <% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
        <<%= integration.jsName %>.Provider {...<%= integration.jsName %>Context}>
      <% } %>
        <RouterProvider router={router} />
      <% for(const integration of integrations.filter(i => i.type === 'root-provider').reverse()) { %>
        </<%= integration.jsName %>.Provider>
      <% } %>
    </StrictMode>
  );
}

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
<% } else {
  
/* File Router */
  
%>import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createRouter } from "@tanstack/react-router";
<% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
import * as <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
<% } %>

// Import the generated route tree
import { routeTree } from "./routeTree.gen";

import "./styles.css";
import reportWebVitals from "./reportWebVitals.<%= js %>";

// Create a new router instance
<% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
const <%= integration.jsName %>Context = <%= integration.jsName %>.getContext();
<% } %>const router = createRouter({
  routeTree,
  context: {
    <% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
      ...<%= integration.jsName %>Context,
    <% } %>
  },
  defaultPreload: "intent",
  scrollRestoration: true,
  defaultStructuralSharing: true,
  defaultPreloadStaleTime: 0,
});

// Register the router instance for type safety
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

// Render the app
const rootElement = document.getElementById("app");
if (rootElement && !rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <StrictMode>
      <% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
        <<%= integration.jsName %>.Provider {...<%= integration.jsName %>Context}>
      <% } %>
          <RouterProvider router={router} />
      <% for(const integration of integrations.filter(i => i.type === 'root-provider').reverse()) { %>
        </<%= integration.jsName %>.Provider>
      <% } %>
    </StrictMode>
  );
}

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();<% } %>